Highcharts একটি শক্তিশালী JavaScript লাইব্রেরি, যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। Highcharts ব্যবহার করতে, আপনাকে এটি আপনার Angular বা অন্য JavaScript প্রজেক্টে ইনস্টল করতে হবে। npm (Node Package Manager) ব্যবহার করে Highcharts লাইব্রেরি ইনস্টল করা অত্যন্ত সহজ। এখানে Highcharts ইনস্টল করার ধাপগুলো বিস্তারিতভাবে দেয়া হলো।

1. Highcharts ইনস্টল করা

Angular বা অন্য JavaScript প্রজেক্টে Highcharts ইনস্টল করতে, প্রথমে npm ব্যবহার করে Highcharts প্যাকেজটি ইনস্টল করুন। টার্মিনাল বা কমান্ড প্রম্পটে নিচের কমান্ডটি রান করুন:

npm install highcharts --save

এই কমান্ডটি Highcharts প্যাকেজটি আপনার প্রজেক্টে ইনস্টল করবে এবং package.json ফাইলে ডিপেনডেন্সি হিসেবে যোগ করবে।

• --save ফ্ল্যাগটি আপনার ডিপেনডেন্সি তালিকায় Highcharts কে যুক্ত করে, তবে আধুনিক npm সংস্করণে এটি স্বয়ংক্রিয়ভাবে করা হয়।

2. Highcharts Angular র‍্যাপার ইনস্টল করা (optional)

যদি আপনি Angular এর সাথে Highcharts ব্যবহার করতে চান, তাহলে আপনাকে highcharts-angular নামক একটি Angular র‍্যাপার ইনস্টল করতে হবে। এটি Angular এর মধ্যে Highcharts ইন্টিগ্রেশন সহজ করে তোলে। এটি ইনস্টল করতে নিচের কমান্ডটি ব্যবহার করুন:

npm install highcharts-angular --save

এই কমান্ডটি Highcharts এর জন্য Angular র‍্যাপার প্যাকেজ ইনস্টল করবে।

3. Highcharts এবং Angular র‍্যাপার মডিউল ইমপোর্ট করা

Highcharts এবং highcharts-angular ইন্সটল করার পর, আপনাকে Angular মডিউলে Highcharts এবং Highcharts Angular র‍্যাপার ইমপোর্ট করতে হবে।

প্রথমে, আপনার Angular অ্যাপের app.module.ts ফাইলে প্রয়োজনীয় মডিউলগুলো ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular'; // Import Highcharts Angular module

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HighchartsChartModule],  // Add Highcharts module here
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

4. Highcharts কম্পোনেন্টে ব্যবহার করা

Highcharts লাইব্রেরি এবং Angular র‍্যাপার সঠিকভাবে ইনস্টল ও ইমপোর্ট করার পর, আপনি আপনার Angular কম্পোনেন্টে Highcharts ব্যবহার করতে পারবেন। উদাহরণস্বরূপ:

1. app.component.ts ফাইলে Highcharts ব্যবহার করা:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';  // Import Highcharts library

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'line'
    },
    title: {
      text: 'Sample Highcharts in Angular'
    },
    series: [{
      name: 'Data Series',
      data: [1, 2, 3, 4, 5]
    }]
  };
}

2. app.component.html ফাইলে Highcharts চার্ট রেন্ডার করা:

<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

এই কোডটি Angular কম্পোনেন্টে Highcharts চার্ট তৈরি করবে।

সারাংশ

Highcharts লাইব্রেরি npm এর মাধ্যমে সহজেই ইনস্টল করা যায় এবং Angular অ্যাপ্লিকেশনের সাথে ইন্টিগ্রেট করা সম্ভব। Highcharts-এর সাহায্যে আপনি খুব সহজেই ইন্টারেক্টিভ এবং রেসপন্সিভ চার্ট তৈরি করতে পারবেন। highcharts-angular র‍্যাপার ব্যবহার করলে Angular অ্যাপ্লিকেশনের মধ্যে Highcharts এর ইন্টিগ্রেশন আরও সহজ হয়ে যায়।